<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
    <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../../scripts/Thrive.js"  type="text/javascript"></script>
    <script src="../AccountControl/AccountControl.js" type="text/javascript"></script>
    <script src="../Feel/Feel.js" type="text/javascript"></script>
    <script src="Breathe.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../../css/style.css" type="text/css" />
</head>

<body>
    <div id="breathe" data-role="page" data-theme="a">
    
    <script type="text/javascript">
		var breatheCtx;
		var breatheUp = true;
		var breatheHue = 0;
		var breatheLight = 0;
		var breatheHeight;
		var breatheWidth;

		function breatheDraw() {
			breatheCtx.fillStyle = "hsl(" + breatheHue + ", 90%," + breatheLight +"%)";
			breatheCtx.fillRect(0,0,breatheWidth,breatheHeight);
	
			if (breatheUp) {
				breatheLight = breatheLight + 1;
				if (breatheLight >= 90) {
					breatheUp = false;
					breatheHue = breatheHue + 30;
					breatheHue = breatheHue % 360;
				}
			} 
			else {
				breatheLight = breatheLight - 1;
				if (breatheLight <= 10) {
					breatheUp = true;
				}
			}
		}	
		
		$("#breathe").live('pagecreate', function() {
			breathe_prefetch();
		});
		
		$("#breatheToggle").live('click', function() {
			toggleBreathing();
		});
	
		$("#breathe").live('pagebeforeshow', function() {
			$('#breatheCanvas')[0].width = window.innerWidth;
			$('#breatheCanvas')[0].height = window.innerHeight-43;
			breatheWidth = $('#breatheCanvas')[0].width;
			breatheHeight = $('#breatheCanvas')[0].height;
			breatheCtx = $('#breatheCanvas')[0].getContext("2d");
		});
		
		$(window).resize(function() {
			$('#breatheCanvas')[0].width = window.innerWidth;
			$('#breatheCanvas')[0].height = window.innerHeight-43;
			breatheWidth = $('#breatheCanvas')[0].width;
			breatheHeight = $('#breatheCanvas')[0].height;
			breatheCtx = $('#breatheCanvas')[0].getContext("2d");
			$("#breatheCanvas").trigger("create");
		});
	</script>
    
    <div data-role="header" data-theme="a">
    	<a href="../../index.html" data-role="button" data-icon="arrow-l">Thrive</a>
        <h1>Breathe</h1>
        <a href="info.html" data-icon="info">Info</a>
    </div>
    
    <div data-role="content" data-theme="a">
    
		<canvas id="breatheCanvas"></canvas>
		<a id="breatheToggle" data-role="button">Start</a>
    </div>
    
    </div>
</body>

</html>
